<script setup>
import { defineAsyncComponent, inject, onMounted, reactive } from 'vue';

import useTableHooks from '#/tools/tableHooks.ts';

const TableList = defineAsyncComponent(
  () => import('#/component/tableList/index.vue'),
);
const $baseTableHeight = inject('$baseTableHeight');
const option = reactive({
  tableList: [],
  tableListLoading: false,
  total: 1,
  index: true,
  queryForm: {
    pageNum: 1,
    pageSize: 20,
    delFlag: 0,
  },
  height: $baseTableHeight(88 + 42),
  type: '',
  treeKey: '',
  columns: {
    searchContent: [
      {
        type: 'Input',
        value: 'k',
        label: '搜索框',
        label_align: 1,
        placeholder: '模糊检索，支持空格(或)和 +(并)',
      },
      { type: 'Input', value: 'companyName', label: '承诺公司' },
      {
        type: 'Select',
        value: 'status',
        label: '数据状态',
        multiple: true,
        source: 'dataStatus',
      },
      {
        type: 'Select',
        value: 'upStatus',
        label: '上报状态',
        multiple: true,
        source: 'upStatus',
      },
      { type: 'DatePickers', value: 'fillTime', label: '研判时间' },
      { type: 'DatePickers', value: 'up_datetime', label: '上报时间' },
    ],
    tableColumns: [
      { label: 'uuid', prop: 'uuid', sortable: false },
      { label: '承诺公司', prop: 'companyName', sortable: false },
      {
        label: '承诺信息',
        prop: 'PROMISESIGNINFO',
        type: 'custom',
        width: 330,
        customInfo: {
          template:
            '' +
            '<span class="" title="承诺签名">{0}&nbsp;&nbsp;</span><br>' +
            '<span class="column-label" title="承诺人">承诺人：</span><span class="column-date"> {2} &nbsp;</span><span class="column-label" title="承诺时间">承诺时间：</span><span class="column-date"> {1} &nbsp;</span>',
          data: [
            {
              name: 'row',
              formatInfo: {
                dataFormat: 'fun',
              },
              fun: (row) => {
                return row
                  ? `<img src="http://api.dataup.saimoyun.com/img/${row.filePath}%2F${row.COMMITESIGN}" style="width: 100px;height: auto;" alt="">`
                  : '';
              },
            },
            { name: 'COMMITEDATE' },
            { name: 'COMMITMENT' },
          ],
        },
      },
      {
        label: '上报状态',
        prop: 'taskExecutionLog',
        type: 'custom',
        width: 330,
        customInfo: {
          template:
            '' +
            '<span class="" title="上报日志">{2}&nbsp;&nbsp;</span><br>' +
            '<span class="column-label" title="上报时间">时间</span>：<span class="column-date"> {0} &nbsp;</span>' +
            '<span class="column-label" title="上报状态">状态</span>：<span class="column-date"> {1} &nbsp;</span>',
          data: [
            { name: 'up_datetime' },
            {
              name: 'upStatus',
              formatInfo: {
                source: 'upStatus',
                tag: ['info', 'primary', 'success', 'danger', 'warning'],
              },
            },
            { name: 'upLog' },
            { name: 'batchNo' },
          ],
        },
      },
    ],
  },
  api: {
    list: {
      url: '/api/Common/GetDataPage?no=COMAPI-Entpromise&cdb=1',
      method: 'get',
    },
    add: {
      url: '/api/Common/Insert?no=COMAPI-Entpromise&cdb=1',
      method: 'post',
    },
    edit: {
      url: '/api/Common/Update?no=COMAPI-Entpromise&cdb=1',
      method: 'post',
    },
    delete: {
      url: '/api/Common/Delete?no=COMAPI-Entpromise&cdb=1',
      method: 'post',
    },
  },
});
const { fetchData, changeSearch, handleDelete } = useTableHooks(option);
onMounted(async () => {
  await fetchData(option.queryForm);
});
</script>
<template>
  <div class="tableList-container">
    <TableList
      :option="option"
      @change-search="changeSearch"
      @refresh="fetchData"
    >
      <template #searchButton="{ selectRows }">
        <el-button icon="Plus" type="success">添加</el-button>
        <el-button icon="Download" plain>导出</el-button>
        <el-button icon="Upload" plain>导入</el-button>
      </template>
      <template #tabButton="{ row }">
        <el-button bg icon="Document" plain text title="查看" type="info">
          查看
        </el-button>
        <el-button bg icon="Edit" plain text title="编辑" type="primary">
          编辑
        </el-button>
        <el-button bg icon="Delete" plain text title="删除" type="danger">
          删除
        </el-button>
      </template>
    </TableList>
  </div>
</template>
<style scoped lang="scss"></style>
